<template>
  <div class="page researchProject">
    <el-form ref="form" :model="form">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>研究项目表</span>
        </div>
        <div>
          <p class="p_title">本表由申报者在线填写，在线打印自动生成的文档。申报者、监护人须在指定位置签名确认，就读学校须加盖公章确认。申报者将填写完整的表格扫描上传至申报系统，完成提交。自制申报表无效，不接受以电子邮件或传真方式提交的申报表。</p>
        </div>
        <div class="table">
          <h2>第十八届“明天小小科学家”奖励活动</h2>
          <h4>申报表二：研究项目表（必填）</h4>
          <div>
            
          </div>
          <div class="table_grounp">
            <h4>A、研究报告</h4>
            <table width="100%">
              <tr>
                <td>项目标题</td>
                <td colspan="6">
                  <!-- <input type="text" v-model="form.projectTitle"> -->
                  
                  <el-form-item :required="required" :show-message="false" prop='projectTitle'>
                    <el-input v-model="form.projectTitle"></el-input>
                  </el-form-item>
                </td>
                
              </tr>
              <tr>
                <td>副标题</td>
                <!-- <td colspan="6"><input type="text" v-model="form.projectSubtitle"></td> -->
                <td colspan="6">
                  
                  <el-form-item :required="required" :show-message="false" prop='projectSubtitle'>
                    <el-input v-model="form.projectSubtitle"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>关键词</td>
                <!-- <td colspan="6"><input type="text" v-model="form.keyWord"></td> -->
                <td colspan="6">
                  
                  <el-form-item :required="required" :show-message="false" prop='keyWord'>
                    <el-input v-model="form.keyWord"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>学科</td>
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='subject'>
                    <el-select v-model="form.subject" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                </td>
                <td>辅导教师</td>
                <!-- <td colspan="3"><input type="text" v-model="form.tutor"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='tutor'>
                    <el-input v-model="form.tutor"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>学校</td>
                <!-- <td colspan="6"><input type="text" v-model="form.school"></td> -->
                <td colspan="6">
                  <el-form-item :required="required" :show-message="false" prop='school'>
                    <el-input v-model="form.school"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>校外辅导机构</td>
                <!-- <td colspan="6"><input type="text" v-model="form.guidanceInstitution"></td> -->
                <td colspan="6">
                  <el-form-item :required="required" :show-message="false" prop='guidanceInstitution'>
                    <el-input v-model="form.guidanceInstitution"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>指导专家</td>
                <!-- <td colspan="3"><input type="text" v-model="form.instructExpert"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='instructExpert'>
                    <el-input v-model="form.instructExpert"></el-input>
                  </el-form-item>
                </td>
                <td>推荐专家</td>
                <!-- <td colspan="3"><input type="text" v-model="form.recommendedExperts"></td> -->
                <td colspan="3">
                  <el-form-item :required="required" :show-message="false" prop='recommendedExperts'>
                    <el-input v-model="form.recommendedExperts"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          <div class="table_grounp">
            <h4>B、研究摘要（300字以内）</h4>
            <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.summary'>
              <el-input
                type="textarea"
                :maxlength="300"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingProjectSubject.summary"
                />
                <span class="lenght">{{ summary }}/300</span>
            </el-form-item>
            
          </div>
          <div class="table_grounp">
            <h4>C、项目简介（600字以内）</h4>
            <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.briefIntroduction'>
              <el-input
              type="textarea"
              :maxlength="600"
              :autosize="{ minRows: 10, maxRows: 20}"
              v-model="form.filingProjectSubject.briefIntroduction"
              />
              <span class="lenght">{{ briefIntroduction }}/600</span>
            </el-form-item>
          </div>
          <div class="table_grounp">
            <h4>D、研究概括</h4>
            <div class="box_input">
              <div class="box_input__title">
                你的研究课题是如何产生的？是什么启发你进行研究的，研究的目的是什么？（300字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey1'>
                  <el-input 
                  type="textarea"
                  :maxlength="300"
                  :autosize="{ minRows: 5, maxRows: 5}"
                  v-model="form.filingProjectSubject.survey1"/>
                  <span class="lenght">{{ survey1 }}/300</span>
                </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你和辅导老师、指导专家是如何建立关系的？你们的项目研究工作如何进行？（300字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey2'>
                  <!-- <input type="text" v-model="form.filingProjectSubject.survey2"> -->
                  <el-input 
                    type="textarea"
                    :maxlength="300"
                    :autosize="{ minRows: 5, maxRows: 5}"
                    v-model="form.filingProjectSubject.survey2"/>
                    <span class="lenght">{{ survey2 }}/300</span>
                </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你的研究工作持续了多长时间？详细阐明你是如何安排研究时间的，以及这样安排研究时间的理由。（300字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey3'>
                  <!-- <input type="text" v-model="form.filingProjectSubject.survey2"> -->
                  <el-input 
                    type="textarea"
                    :maxlength="300"
                    :autosize="{ minRows: 5, maxRows: 5}"
                    v-model="form.filingProjectSubject.survey3"/>
                    <span class="lenght">{{ survey3 }}/300</span>
                </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你的研究工作是在哪里进行的？得到哪些人（姓名、单位、职称、联系方式）在哪些方面提供的指导、培训或帮助？如研究方法、设备使用、研究材料、研究思路等，请具体说明。如其中涉及私人关系，须特别说明。（500字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey4'>
                  <!-- <input type="text" v-model="form.filingProjectSubject.survey2"> -->
                  <el-input 
                    type="textarea"
                    :maxlength="500"
                    :autosize="{ minRows: 10, maxRows: 20}"
                    v-model="form.filingProjectSubject.survey4"/>
                    <span class="lenght">{{ survey4 }}/500</span>
                </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你在研究过程中的主要工作是什么？如果你的工作涉及指导专家或其他项目成员，须详细说明你独立承担的每一部分工作内容和个人贡献。你的工作和其他专家或成员的相似或区别在哪里？（300字以内）
              </div>
              <div class="box_input__body">
                
                  <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey6'>
                    <el-input 
                    type="textarea"
                    :maxlength="300"
                    :autosize="{ minRows: 5, maxRows: 5}"
                    v-model="form.filingProjectSubject.survey5"/>
                    <span class="lenght">{{ survey5 }}/300</span>
                  </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你的研究工作对社会有什么益处？你对研究工作后期改进还有什么想法？（500字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey6'>
                  <el-input 
                  type="textarea"
                  :maxlength="500"
                  :autosize="{ minRows: 10, maxRows: 20}"
                  v-model="form.filingProjectSubject.survey6"/>
                  <span class="lenght">{{ survey6 }}/500</span>
                </el-form-item>
              </div>
            </div>
            <div class="box_input">
              <div class="box_input__title">
                你通过此次研究工作收获了什么？（300字以内）
              </div>
              <div class="box_input__body">
                <el-form-item :required="required" :show-message="false" prop='filingProjectSubject.survey7'>
                  <el-input 
                    type="textarea"
                    :maxlength="300"
                    :autosize="{ minRows: 5, maxRows: 5}"
                    v-model="form.filingProjectSubject.survey7"/>
                    <span class="lenght">{{ survey7 }}/300</span>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="table_grounp">
            <h4>E、已提交研究项目材料</h4>
            <table width="100%">
              <tr>
                <td>1.研究报告（PDF／不超过10M）(必填)</td>
                <td colspan="10">
                  <el-upload
                  class="avatar-uploader"
                  :action="api + '/upload/image/研究报告'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUploadPDF">
                  <span v-if="form.filingProjectSubject.dataSubmit1 !== ''">已上传(点击修改)</span>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </td>
              </tr>
              <tr>
                <td>2.配图（JPG,PNG／不超过4M）(选填)</td>
                <td colspan="10">
                  <el-upload
                  class="avatar-uploader"
                  :action="api + '/upload/image/配图1'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUploadIMG2">
                  <span v-if="form.filingProjectSubject.dataSubmit2 !== ''">已上传(点击修改)</span>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </td>
              </tr>
              <tr>
                <td>3.配图（JPG,PNG／不超过4M）(选填)</td>
                <td colspan="10">
                  <el-upload
                  class="avatar-uploader"
                  :action="api + '/upload/image/配图2'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUploadIMG3">
                  <span v-if="form.filingProjectSubject.dataSubmit3 !== ''">已上传(点击修改)</span>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </td>
              </tr>
              <tr>
                <td>4.配图（JPG,PNG／不超过4M）(选填)</td>
                <td colspan="10">
                  <el-upload
                  class="avatar-uploader"
                  :action="api + '/upload/image/配图3'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess4"
                  :before-upload="beforeAvatarUploadIMG4">
                  <span v-if="form.filingProjectSubject.dataSubmit4 !== ''">已上传(点击修改)</span>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </td>
              </tr>
            </table>
          </div>
          <h4 style="font-size:16px;">
            我确认上述内容属实。
          </h4>
          <div class="form">
            <div class="form_box">
              <div>
                <span>申报者签名（手写）：</span><input disabled type="text">
              </div>
              <div>
                <span>监护人签名（手写）：</span><input disabled type="text">
              </div>
              <div>
                <span>学校（签章）：</span><input disabled type="text">
              </div>
            </div>
            <div class="form_box">
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
              <div>
                <span>日期（手写）：</span><input disabled type="text">
                <span>年</span><input disabled type="text">
                <span>月</span><input disabled type="text">
                <span>日</span>
              </div>
            </div>
          </div>
          <div style="text-align:center; margin:20px 0;">
            <el-button @click="pevs" type="primary" size="mini">上一步</el-button>
            <el-button @click="save" type="primary" size="mini">保存</el-button>
            <el-button @click="nexts" type="primary" size="mini">下一步</el-button>
            <div style="font-size:14px; margin-top:20px;">
              <small>请先保存再进行下一步操作</small>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { pev, next } from "@/function/pevNext/pevNext.js";
import { researchProject } from "@/function/formTable/formTable.js";
import { get_researchProject } from "@/function/formTable/getFormTable.js";
import { option } from "./option";
export default {
  mounted() {
    get_researchProject(this);
  },
  computed: {
    // 研究摘要字数
    summary() {
      return this.form.filingProjectSubject.summary.length
    },
    // 项目简介字数
    briefIntroduction() {
      return this.form.filingProjectSubject.briefIntroduction.length
    },
    // 研究概括1 字数
    survey1() {
      return this.form.filingProjectSubject.survey1.length
    },
    // 研究概括2 字数
    survey2() {
      return this.form.filingProjectSubject.survey2.length
    },
    // 研究概括3 字数
    survey3() {
      return this.form.filingProjectSubject.survey3.length
    },
    // 研究概括4 字数
    survey4() {
      return this.form.filingProjectSubject.survey4.length
    },
    // 研究概括5 字数
    survey5() {
      return this.form.filingProjectSubject.survey5.length
    },
    // 研究概括6 字数
    survey6() {
      return this.form.filingProjectSubject.survey6.length
    },
    // 研究概括7 字数
    survey7() {
      return this.form.filingProjectSubject.survey7.length
    }
  },
  data() {
    return {
      // newapi: process.env.API_ROOT + `/upload/image/` + encodeURI('%E7%A0%94%E7%A9%B6%E6%8A%A5%E5%91%8A'),
      api: process.env.API_ROOT,
      required: true,
      form: {
        projectTitle: '',
        projectSubtitle: '',
        keyWord: '',
        subject: '',
        tutor: '',
        school: '',
        guidanceInstitution: '',
        instructExpert: '',
        recommendedExperts: '',
        filingProjectSubject: {
          summary: '',
          briefIntroduction: '',
          survey1: '',
          survey2: '',
          survey3: '',
          survey4: '',
          survey5: '',
          survey6: '',
          survey7: '',
          dataSubmit1: '',
          dataSubmit2: '',
          dataSubmit3: '',
          dataSubmit4: ''
        }
      },
      options: option
    };
  },
  methods: {
    pevs() {
      pev(this);
    },
    nexts() {
      next(this);
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = this.form;
          if(this.form.filingProjectSubject.dataSubmit1 !== '') {
            researchProject(data, this);            
          } else {
            alert('请上传研究报告')
          }
        } else {
          alert("请填写完整信息！");
          return false;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.filingProjectSubject.dataSubmit1 = res.url;
    },
    handleAvatarSuccess2(res, file) {
      this.form.filingProjectSubject.dataSubmit2 = res.url;
    },
    handleAvatarSuccess3(res, file) {
      this.form.filingProjectSubject.dataSubmit3 = res.url;
    },
    handleAvatarSuccess4(res, file) {
      this.form.filingProjectSubject.dataSubmit4 = res.url;
    },
    beforeAvatarUploadPDF(file) {
      const isPDF = file.type === "application/pdf";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isPDF) {
        this.$message.error("请上传 PDF!");
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isPDF && isLt10M;
    },
    beforeAvatarUploadIMG2(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 4;

      if (!isJPG) {
        this.$message.error("请上传图片");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    },
    beforeAvatarUploadIMG3(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 4;

      if (!isJPG) {
        this.$message.error("请上传图片");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    },
    beforeAvatarUploadIMG4(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 4;

      if (!isJPG) {
        this.$message.error("请上传图片");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
